<template>
    <el-dialog
    :model-value="props.isShow"
    :title="props.isAdd ? '添加管理员' : '修改管理员'"
    width="700"
    center
    :before-close="cancel"
  >
    <el-form :model="userInfo" :rules="rules" ref="formRef">
      <el-form-item label="所属角色" label-width="120px" prop="roleid">
        <el-select v-model="userInfo.roleid" placeholder="请选择所属角色">
          <el-option
            v-for="item in get_roleList"
            :key="item.id"
            :label="item.rolename"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="角色名称" label-width="120px" prop="username">
        <el-input v-model="userInfo.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" label-width="120px">
        <el-input v-model="userInfo.password"></el-input>
        <p class="mes" v-if="!props.isAdd">密码不传则为不修改</p>
      </el-form-item>

      <el-form-item label="状态" label-width="120px">
        <el-switch
          v-model="userInfo.status"
          active-color="#13ce66"
          inactive-color="#ccc"
          :active-value="1"
          :inactive-value="2"
        >
        </el-switch>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button size="large" @click="cancel">取 消</el-button>
        <el-button type="primary" size="large" @click="confirm" v-if="props.isAdd">
          确 定
        </el-button>
        <el-button type="primary" size="large" @click="editItem" v-else>
          编 辑
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { defineProps,ref,onMounted,computed, reactive,defineEmits,defineExpose } from 'vue'
import { useStore } from 'vuex'
import {useradd,userinfo,useredit} from '@/request/api'
const $store = useStore()
const emit = defineEmits(['cancel'])
const action_roleList = ()=>{
    $store.dispatch('role/action_roleList')
}
onMounted(()=>{
    action_roleList()
})
const get_roleList = computed(()=>{
    return $store.getters['role/get_roleList']
})
const action_userList = ()=>{
    $store.dispatch('user/action_userList')
}
const props = defineProps(['isShow','isAdd'])
let userInfo = ref({
    roleid:'',
    username:'',
    password:'',
    status:1
})
// 表单验证
const rules = reactive({
    username:[
        {
            required:true,  // 是否为必填项
            message:'请输用户名',  // 提示信息
            trigger:'blur'  // 触发方式  blur | change
        },
        {
            min:2,max:8,message:'长度在2到8个字符',trigger:'blur'
        }
    ],
    roleid:[
        {
            required:true,  // 是否为必填项
            message:'请选择角色',  // 提示信息
            trigger:'change'  // 触发方式  blur | change
        }
    ]
})
// 取消
const cancel =()=>{
    emit('cancel')
}
const formRef = ref()
// 添加
const action_userconut = ()=>{
    $store.dispatch('user/action_userconut')
}
const confirm =()=>{
    formRef.value.validate(async (val)=>{
        if(!val){
            return
        }
        try{
            let res = await useradd(userInfo.value)
            if(res.code == 200){
                ElMessage.success(res.msg)
                action_userList()
                action_userconut()
                cancel()
            }else{
                ElMessage.warning(res.msg)
            }

        }catch(err){
            ElMessage.error(err)
        }
    })
}
// 数据回显
const lookup =async (uid)=>{
  try{
    let res = await userinfo({uid})
    if(res.code==200){
      userInfo.value = res.list
      userInfo.value.uid = uid
    }else{
      ElMessage.warning(res.msg)
    }
  }catch(err){
    ElMessage.error(err)
  }
}
// 编辑
const editItem =()=>{
    formRef.value.validate(async (val)=>{
      if(!val){
        return
      }
      // 发送请求
      try{
        let res = await useredit(userInfo.value)
        if(res.code==200){
          ElMessage.success(res.msg)
          action_userList()
          cancel()
        }else{
          ElMessage.warning(res.msg)
        }
      }catch(err){
        ElMessage.error(err)
      }
    })
}
defineExpose({
    lookup
})
</script>

<style>

</style>